<template>
  <div style="padding: 10px; margin-bottom: 50px">
    <el-row>
      <el-col :span="4">
        <el-card style="width: 300px; height: 600px; color: #333">
          <div style="padding-bottom: 10px; border-bottom: 1px solid #ccc;font-size: 20px">咨询用户<span style="font-size: 15px">（点击用户名开始沟通）</span>
          </div>
          <div style="padding: 12px 0" v-for="user in users" :key="user.name">
            <el-button type="text" @click="$router.push({path:'/customerService',query:{serviceNo:storeId,userId:user.name}})" style="font-size: 25px">{{user.name}}</el-button>
            <i class="el-icon-chat-dot-round" style="margin-left: 10px; font-size: 20px; cursor: pointer"
               @click="chatUser = user.name"></i>
            <span style="font-size: 12px;color: limegreen; margin-left: 5px" v-if="user.name === chatUser">chatting...</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="20">
        <div style="width: 500px; margin: 0 auto; background-color: white;
                    border-radius: 5px; box-shadow: 0 0 10px #ccc">
          <el-card :body-style="{ padding: '10px' }">
            <div>
              <h1>卖家守则：</h1>
              <h2>1. 不可以骂顾客</h2>
              <h2>2. 不可以骂顾客</h2>
              <h2>3. 不可以骂顾客</h2>
            </div>
            <div style="padding: 14px;">
              <span>管理员宣</span>
              <div class="bottom clearfix">
                <time class="time">2022年6月1日</time>
                <el-button type="text" class="button">赞同</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CustomerService from "./customerService";
import axios from "axios";
const connect=axios.create({
  baseURL:"http://10.22.112.205:8081"
})
export default {
  name: "Talk",
  components: {CustomerService},
  data () {
    return {
      users: [],
      chatUser: '',
      storeId:'',
    }
  },
  created() {
    this.getDate();
  },
  methods: {
    getDate() {
      console.log("-----"+localStorage.getItem("ms_username"));
      console.log("-----"+localStorage.getItem("storeId"));
      this.storeId = localStorage.getItem("storeId");
      connect.post('/ServiceList?merchantsNo='+this.storeId).then(res=>{
        this.users = res.data;
      })
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>